<template>
    <div>
        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                 active-text-color="#ffd04b" router>
            <!-- 有子目录的功能菜单 -->
            <el-submenu :index="item_children.label" v-for="item_children in hasChildren" :key="item_children.label">
                <template slot="title">
                    <i :class="'el-icon-' + item_children.icon "></i>
                    <span>{{item_children.label}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="childrena.path" v-for="childrena in item_children.children"
                                  :key="childrena.path">
                        <i :class="'el-icon-' + childrena.icon"></i>
                        <span slot="title">{{childrena.label}}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <!-- 没有子目录功能菜单 -->
            <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
                <i :class="'el-icon-' + item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "commonAside",
        data() {
            return {
                // MenuList: [
                //     {
                //         icon: 's-home',
                //         label: '首页',
                //         path: '/home',
                //         name: 'home',
                //     },
                //     {
                //         icon: 'search',
                //         label: '信息查询',
                //         path: '/search',
                //         name: 'search'
                //     },
                //     {
                //         icon: 's-check',
                //         label: '权限管理',
                //         children: [
                //             {
                //                 icon: 'setting',
                //                 label: '角色管理',
                //                 path: '/role',
                //                 name: 'role'
                //             },
                //             {
                //                 icon: 'help',
                //                 label: '权限管理',
                //                 path: '/access',
                //                 name: 'access'
                //             },
                //             {
                //                 icon: 's-operation',
                //                 label: '权限分配',
                //                 path: '/account',
                //                 name: 'account'
                //             }
                //         ]
                //     },
                //     {
                //         icon: 'user',
                //         label: '用户信息',
                //         path: '/user',
                //         name: 'user'
                //     },
                //     {
                //         icon: 'collection',
                //         label: '个人中心',
                //         path: '/center',
                //         name: 'center'
                //     },
                //     {
                //         icon: 's-cooperation',
                //         label: '其他页面',
                //         children: [
                //             {
                //                 icon: 's-management',
                //                 label: '页面1',
                //                 path: '/pageone',
                //                 name: 'pageone',
                //             },
                //             {
                //                 icon: 's-ticket',
                //                 label: '页面2',
                //                 path: '/pagetwo',
                //                 name: 'pagetwo'
                //             }
                //         ]
                //     }
                // ]
            }
        },
        methods: {},
        computed: {
            // 对路由页面筛选，判断是否有字路由
            hasChildren() {
                return this.menu.filter(item => item.children)
            },

            noChildren() {
                return this.menu.filter(item => !item.children)
            },

            // 获取vuex的动态路由
            menu() {
                return this.$store.state.tab.menu
            }
        }
    }
</script>

<style scoped>
    .el-menu {
        border-right: 0;
    }
</style>